<!-- 菜单管理 -->
<template>
<com-drawer class="role-permissions-wp" v-model="visible" title="角色权限配置">
  <div class="name">所拥有的权限：</div>
  <el-tree ref="tree"
    :data="tree"
    show-checkbox
    default-expand-all
    :node-key="defaultProps.key"
    :check-strictly="isNoRelation"
    :props="defaultProps">
  </el-tree>
  <template slot="footer">
    <el-dropdown class="pull-left" placement="bottom" size="medium">
      <el-button size="small">
        树操作<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><div class="drop-tree-item" @click="toggleRelation(true)">父子关联</div></el-dropdown-item>
        <el-dropdown-item><div class="drop-tree-item" @click="toggleRelation(false)">取消关联</div></el-dropdown-item>
        <el-dropdown-item><div class="drop-tree-item" @click="setCheckedMenu(true)">全部勾选</div></el-dropdown-item>
        <el-dropdown-item><div class="drop-tree-item" @click="setCheckedMenu(false)">取消全选</div></el-dropdown-item>
        <el-dropdown-item><div class="drop-tree-item" @click="toggleExpandedAll(true)">展开所有</div></el-dropdown-item>
        <el-dropdown-item><div class="drop-tree-item" @click="toggleExpandedAll(false)">合并所有</div></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-button size="small" @click="visible = false">取 消</el-button>
    <el-button size="small" @click="submit()" :loading="btnLoading">{{ btnLoading ? '提交中 ...' : '仅保存' }}</el-button>
    <el-button size="small" type="primary" @click="submit(true)" :loading="btnLoading">{{ btnLoading ? '提交中 ...' : '保存并关闭' }}</el-button>
  </template>
</com-drawer>
</template>
<script>

import {permission, role} from "@/config/api.js";

export default {
  data () {
    return {
      visible: false,
      loading: false,
      btnLoading: false,

      detail: {}, // 当前详情

      // 配置项
      defaultProps: {
        children: 'children',
        label: 'slotTitle',
        key: 'value'
      },

      // 是否严格的遵循父子不互相关联的做法
      isNoRelation: true,
      // 本来选中
      checkedOrigin: [],

      // 所有的idkey
      allKeys: [],
      // 树数据
      tree: [],

    }
  },
  // computed: {
  //   // 当前树的所有key
  //   allKeys () {
  //     var res = [], key = this.defaultProps.key, children = this.defaultProps.children;
  //     ergodic(this.tree);
  //     return res;
  //     // 遍历
  //     function ergodic (arr) {
  //       arr.forEach(item => {
  //         res.push(item[key]);
  //         if (item[children] && item[children].length) {
  //           ergodic(item[children]);
  //         }
  //       })
  //     }
  //   }
  // },
  methods: {
    open (detail) {
      this.detail = detail;

      this.visible = true;
      this.loading = true;

      this.getMenuList(); // 获取当前的菜单列表
    },

    // 获取当前的菜单列表
    getMenuList () {
      this.$get(role.queryTreeList).then(res => {
        if (res.success) {
          this.allKeys = res.result.ids;
          this.tree = res.result.treeList;
          this.getCheckedById(); // 获取选中的菜单项
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },

    // 获取选中的菜单项
    getCheckedById () {
      var param = {
        roleId: this.detail.id
      }
      this.$get(permission.queryRolePermission, param).then(res => {
        if (res.success) {
          var data = res.result;
          this.checkedOrigin = data; // 记录本来选中
          this.setCheckedMenu(data);
        }
      })
    },

    // 提交，isClose是否关闭弹窗
    submit (isClose) {
      var checkedKeys = this.$refs.tree.getCheckedKeys();
      var param = {
        permissionIds: checkedKeys.join(','), // 当前选中的id
        lastpermissionIds: this.checkedOrigin.join(','), // 没改变之前的id
        roleId: this.detail.id
      }
      this.$post(permission.saveRolePermission, param).then(res => {
        if (res.success) {
          this.$message.success(res.message);
          if (isClose) {
            this.visible = false;
          } else {
            this.checkedOrigin = this.$g.copy(checkedKeys);
          }
        }
      })
    },

    // 切换关联
    toggleRelation (data) {
      this.isNoRelation = !data;
    },

    // 设置选中项，true全选、false全不选、数组-选中数组项
    setCheckedMenu (data) {
      var arr = data;
      if (typeof data == 'boolean') {
        arr = data ? this.$g.copy(this.allKeys) : []
      }
      this.$refs.tree.setCheckedKeys(arr);
    },

    // 切换展开
    toggleExpandedAll (isExpand) {
      var _this = this, key = this.defaultProps.key, children = this.defaultProps.children;
      // 遍历树
      ergodic(this.tree);
      // 遍历
      function ergodic (arr) {
        arr.forEach(item => {
          _this.$refs.tree.store.nodesMap[item[key]].expanded = isExpand;
          if (item[children] && item[children].length) {
            ergodic(item[children]);
          }
        })
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.role-permissions-wp {
  .name {
    margin-bottom: 15px;
  }
}
.drop-tree-item {
  padding: 0 15px;
}
</style>
